<template>
  <el-menu
    mode="horizontal"
    :ellipsis="false"
    background-color="#545c64"
    text-color="#fff"
    :router="true"
  >
    <div class="logo" @click="toHome">Altria's Blog</div>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/about">关于</el-menu-item>
    <el-sub-menu index="/resource">
      <template #title>资源库</template>
      <el-menu-item index="/passage" class="tooltip">文章</el-menu-item>
      <el-menu-item index="/anime" class="tooltip">番剧</el-menu-item>
      <!-- 做不动了 -->
      <!-- <el-menu-item index="/game" class="tooltip">游戏</el-menu-item> -->
      <el-menu-item index="/music" class="tooltip">音乐</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/timeline">归档</el-menu-item>
    <el-menu-item index="/author">作者</el-menu-item>
    <search-unit />
    <div class="flex-grow"></div>
    <avatar-unit />
  </el-menu>
</template>

<script>
import SearchUnit from './SearchUnit.vue'
import router from '@/router'
import AvatarUnit from './AvatarUnit.vue'

export default {
  name: 'NavUnit',
  components: { 
    SearchUnit,
    AvatarUnit 
  },
  setup() {
   
    const toHome = () => {
      router.push('/home')
    }

    return {
      toHome
    }
  }
}
</script>

<style scoped>
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding: 0 20px;
    color: #48DBFB;
    cursor: pointer;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .tooltip {
    display: flex;
    justify-content: center;
  }
</style>

<style>
/*这element-plus的popper简直就是鬼才设计，我已经无语了*/
  .popper {
    position: relative;
  }
  .el-menu--popup {
    min-width: 100px;
  }
  /* #ffd04b */
</style>